<template>
  <div class="login">
    <el-dialog
      title="MyAppBox-Vue"
      :visible="true"
      width="400px"
      :modal="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      center
      class="login"
    >
      <el-form ref="form" :model="form" label-width="0px">
        <el-form-item label="">
          <el-input
            v-model="form.username"
            placeholder="用户名"
            prefix-icon="el-icon-user"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input
            v-model="form.psw"
            show-password
            placeholder="密码"
            prefix-icon="el-icon-lock"
            @keyup.enter.native="OnLogin"
          ></el-input>
        </el-form-item>
        <el-form-item style="text-align:left;padding-top:30px">
          <el-button type="primary" @click="OnLogin" :loading="btnloading">
            登 录
          </el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <p />
        @北京-没想好
      </div>
    </el-dialog>
    <div hidden class="bgselect">
      <ul>
        <li><div class="bg1"></div></li>
        <li><div class="bg2"></div></li>
        <li><div class="bg3"></div></li>
      </ul>
    </div>
  </div>
</template>

<script>
import { System1 } from "@/api";
export default {
  data() {
    return {
      form: { username: "", psw: "" },
      btnloading: false
    };
  },
  //外部属性
  props: {},
  //内部方法
  methods: {
    initPage() {},
    async OnLogin() {
      this.btnloading = true;
      let res = await System1.Login(this.form);
      res.strMS && this.$message(res.strMS);
      if (res.MsRbool) {
        this.$store.dispatch("User/setTokenData", res.data).then(() => {
          this.$router.push("/Home");
        });
      } else {
        this.btnloading = false;
      }
    }
  },
  //组件
  components: {},
  //初始化 异步加async await
  mounted() {
    this.initPage();
  },
  //计算属性
  computed: {},
  //监视
  watch: {}
};
</script>

<style lang="scss" scoped>
//登录窗口
.login {
  transition: all 0.8;
  // background-color: #545c64;
  // background-image: linear-gradient(
  //   to right,
  //   #b8cbb8 0%,
  //   #b8cbb8 0%,
  //   #b465da 0%,
  //   #cf6cc9 12%,
  //   #ee609c 33%,
  //   #ee609c 100%
  // );
  background-image: linear-gradient(
    #3f51b1 0%,
    #5a55ae 13%,
    #7b5fac 25%,
    #8f6aae 38%,
    #a86aa4 50%,
    #cc6b8e 62%,
    #f18271 75%,
    #f3a469 87%,
    #f7c978 100%
  );
  /deep/ .el-dialog--center {
    opacity: 1;
    background-color: rgba(84, 92, 100, 0.3);
    box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.3);
    padding: 80px 10px 80px 10px;
    color: #f0f0f0;
    // 头
    .el-dialog__header {
      text-align: left;
      padding: 20px 20px;
      span {
        font-size: 30px;
        color: #f0f0f0;
      }
    }
    // 输入框
    .el-input__inner {
      border: 1px solid;
      border-color: #cf6cc9;
      background: #cf6cc867;
      color: #f0f0f0;
      transition: all 0.8;
    }
    .el-input__inner:hover {
      border: 2px solid #f0f0f0;
      // color: rgba(240, 147, 251, 1);
    }
    // 按钮
    .el-button {
      background: 0 0;
      // border: 2px solid #ff00dd;
      // color: #ff00dd;
      font-weight: 600;
      padding: 10px 40px;
      border-radius: 50px;
      transition: all 0.8;
      border: 2px solid rgba(240, 240, 240, 0.3);
      color: rgba(240, 240, 240, 0.8);
    }
    .el-button:hover {
      border: 2px solid #f0f0f0;
      color: #f0f0f0;
      box-shadow: 0px 0px 10px 2px rgba(240, 147, 251, 1);
      // background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
    }
    // 底部
    .dialog-footer {
      text-align: center;
    }
  }
}

//背景选择
.bgselect {
  height: 120px;
  width: 50px;
  position: relative;
  z-index: 2004;
  li {
    list-style-type: none;
    padding: 5px;
  }
  div {
    width: 30px;
    height: 30px;
    border-radius: 50% 50%;
  }
  .bg1 {
    background-image: linear-gradient(
      to top,
      #3f51b1 0%,
      #5a55ae 13%,
      #7b5fac 25%,
      #8f6aae 38%,
      #a86aa4 50%,
      #cc6b8e 62%,
      #f18271 75%,
      #f3a469 87%,
      #f7c978 100%
    );
  }
  .bg2 {
    background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
  }
  .bg3 {
    background-image: linear-gradient(
      to right,
      #eea2a2 0%,
      #bbc1bf 19%,
      #57c6e1 42%,
      #b49fda 79%,
      #7ac5d8 100%
    );
  }
}
</style>
